<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <script src="./element-ui/lib/index.js"></script>

    <link rel="stylesheet" href="./css/normalize.css">

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/global.css">

    <script src="./js/axios.js"></script>

</head>

<body>

<input type="hidden" id="userId" value="<%=session.getAttribute("userId")%>">
<script>
    alert(document.getElementById("userId").value);
</script>
<div id="app" v-infinite-scroll="load" style="height:100vh; overflow-x: auto;">
    <el-container>
        <el-header>
            <el-container>
                <div>
                    <el-tabs v-model="menu1" @tab-click="handleClick">
                        <el-tab-pane label="首页" name="first"></el-tab-pane>
                    </el-tabs>
                </div>
                <div>
                    <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <div>
                    <el-dropdown split-button type="primary" onclick="location.href='./write.jsp'">
                        发布文章
                        <el-dropdown-menu>
                            <el-dropdown-item icon="el-icon-document" onclick="location.href='./draftbox.jsp'">草稿箱
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div v-if="true">
                    <el-button type="primary" @click="open" plain>
                        <span>登陆</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>注册</span>
                    </el-button>
                </div>
                <div v-if="true">
                    <el-dropdown onclick="location.href='notice.jsp'">
                        <i class=" el-icon-message-solid" style="font-size:30px;"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>评论</el-dropdown-item>
                            <el-dropdown-item>赞和收藏</el-dropdown-item>
                            <el-dropdown-item>新增粉丝</el-dropdown-item>
                            <el-dropdown-item>私信</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div v-if="true">
                    <div>
                        <el-avatar :size="40" :src="circleUrl"></el-avatar>
                    </div>
                </div>
            </el-container>
        </el-header>
        <el-main>
            <el-container>
                <div>
                    <el-card>
                        <ul class="left-card">
                            <li>
                                <el-button icon="el-icon-s-promotion">关注</el-button>
                            </li>
                            <li v-for="item in articleKinds">
                                <el-button icon="el-icon-s-promotion" @click="getArticleByKind(item.articleKindId)">
                                    {{item.articleKind}}
                                </el-button>
                            </li>
                        </ul>
                    </el-card>
                </div>

                <div>
                    <el-card>
                        <div>
                            <el-tabs v-model="menu2" @tab-click="handleClick">
                                <el-tab-pane label="推荐" name="article/getWant.do"></el-tab-pane>
                                <el-tab-pane label="最新" name="article/getWantAndNew.do"></el-tab-pane>
                            </el-tabs>
                        </div>
                        <ul>
                            <li v-for="article in articles">
                                <el-container>
                                    <el-main>
                                        <el-button @click="openArticle(article.articleId)">
                                        </el-button>
                                        <h3 @click.native="openArticle(article.articleId)">{{article.articleTitle}}</h3>
                                        <el-link href="" target="_blank" icon="el-icon-user">{{article.user.userName}}
                                        </el-link>
                                        <el-divider direction="vertical"></el-divider>
                                        <span>
                                                    <i class="el-icon-view">{{article.articleSee}}</i>
                                                </span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span>
                                                    <i class="el-icon-plus">173</i>
                                            </span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span>
                                                    <i class="el-icon-alarm-clock">{{article.articleDate}}</i>
                                            </span>
                                        </p>
                                    </el-main>
                                    <el-aside width="200px" style="overflow: hidden;">
                                        <el-image style="width: 200px;" src="./img/article_pic0.image"
                                                  :fit="fit"></el-image>
                                    </el-aside>
                                </el-container>
                                <el-divider direction="horizontal"></el-divider>
                            </li>
                        </ul>
                    </el-card>
                </div>

                <div>
                    <el-card>
                        <div slot="header">
                            <span><i class="el-icon-reading"></i>文章榜</span>
                            <el-button type="text" @click="changeArticle">换一换</el-button>
                        </div>
                        <div>
                            <ol>
                                <li v-for="item in allArticles">
                                    <el-link href="" target="_blank">{{item.articleTitle}}</el-link>
                                </li>
                            </ol>
                        </div>
                        <el-divider direction="horizontal"></el-divider>
                        <div>
                            <el-link href="" target="_blank">查看更多</el-link>
                        </div>
                    </el-card>
                </div>
            </el-container>
        </el-main>
    </el-container>
    <el-dialog :visible.sync="centerDialogVisible" width="35%">
            <span slot="title" class="dialog-header">
                <h3>
                    登陆博客畅享更多乐趣
                </h3>
                <el-divider direction="horizontal"></el-divider>
            </span>
        <el-container>
            <el-main>
                <el-container direction @keyup.enter.native="login">
                    <el-main direction="vertical">
                        <h3>
                            验证码登陆&nbsp;/&nbsp;注册
                        </h3>
                        <el-input placeholder="账号" v-model="username" clearable>
                        </el-input>
                        <el-input placeholder="请输入密码" v-model="password" type="password">
                            <span>忘记密码</span>
                        </el-input>
                        <el-input placeholder="请输入验证码" v-model="captcha" clearable>
                        </el-input>
                        <div>
                            <el-image id="captcha" src="captcha.do"></el-image>
                            <el-button @click="changeCaptcha">看不清</el-button>
                        </div>
                        <el-container>
                            <el-button onclick="location.href='./register.jsp'" plain>注册</el-button>
                            <el-button type="primary" @click="login">登陆</el-button>
                        </el-container>
                        <el-container>
                            <el-main>
                                <p>其他登陆：
                                    <i class="el-icon-search"></i>
                                    <i class="el-icon-search"></i>
                                    <%--                                    <i class="el-icon-search"></i>--%>
                                </p>
                            </el-main>
                            <el-aside width="">
                                <el-link href="" target="_blank">验证码登陆</el-link>
                            </el-aside>
                        </el-container>
                    </el-main>
                    <el-divider direction="vertical" class="el-divider--vertical"></el-divider>
                    <el-aside direction="vertical" width="">
                        <h3>扫码登陆</h3>
                        <el-image style="width: 100px; height: 100px" :src="xxxxxx" :fit="fit"></el-image>
                        <p>打开微信APP</p>
                        <p>点击“右上角加号-扫一扫”登陆</p>
                    </el-aside>
                </el-container>
            </el-main>
        </el-container>
        <span slot="footer" class="dialog-footer">
                <span>
                    注册登陆即表示同意
                </span>
                <el-link href="" target="_blank" type="primary">用户协议</el-link>
                <span>和</span>
                <el-link href="" target="_blank" type="primary">隐私协议</el-link>
            </span>
    </el-dialog>
</div>

</body>

<script src="./js/index.js"></script>

</html>